<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
    <style>
        .block-content {
            display: flex;
            flex-wrap: wrap;
        }

        .goods-list {
            width: 25%;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .goods-block {
            width: 260px;
            padding: 0 30px;
        }

        .goods-img {
            width: 200px;
            height: 200px;
        }

        .foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .add-card {
            width: 30px;
            height: 30px;
        }

        .mt20 {
            margin-top: 20px;
        }

        /* 确保模态框在屏幕中央显示 */
        .modal-dialog {
            margin: 15% auto; /* 默认值，确保模态框在屏幕中央 */
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">对外经贸SHOP</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="" style="color: red">xxxxx</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统功能 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#" data-toggle="modal" data-target="#regModal">注册</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#loginModal">登录</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#" onclick="exitSys()">安全退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="block-content">

</div>

<!--注册-->
<div class="modal fade" id="regModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">注册窗口</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="regForm">
                    <div class="form-group">
                        <label for="inputRegAccount" class="col-sm-2 control-label">账号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegAccount" placeholder="请输入账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegPassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputRegPassword" placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegRePassword" class="col-sm-2 control-label">确认密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputRegRePassword" placeholder="请确认密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegRealname" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegRealname" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegIdcard" class="col-sm-2 control-label">身份号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegIdcard" placeholder="请输入身份号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegTel" class="col-sm-2 control-label">电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegTel" placeholder="请输入电话">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegAge" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="inputRegAge" placeholder="请输入年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegProvince" class="col-sm-2 control-label">省份</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegProvince" placeholder="请输入省份">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegCity" class="col-sm-2 control-label">城市</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegCity" placeholder="请输入城市">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegDistrict" class="col-sm-2 control-label">街道</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegDistrict" placeholder="请输入街道">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputRegAddr" class="col-sm-2 control-label">地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputRegAddr" placeholder="请输入地址">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="regForm" class="btn btn-primary">注册</button>
            </div>
        </div>
    </div>
</div>

<!--登录-->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myLoginModalLabel">登录窗口</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="loginForm">
                    <div class="form-group">
                        <label for="inputLoginAccount" class="col-sm-2 control-label">账号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputLoginAccount" placeholder="请输入账号">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputLoginPassword" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputLoginPassword" placeholder="请输入密码">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" form="loginForm" class="btn btn-primary">登录</button>
            </div>
        </div>
    </div>
</div>

</body>
<script>

    function exitSys(){
        let anw = window.confirm("确定要退出吗？");
        localStorage.clear()
        updateUsernameDisplay();
    }

    // 处理登录表单提交
    document.getElementById('loginForm').onsubmit = function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取表单数据
        var account = document.getElementById('inputLoginAccount').value;
        var password = document.getElementById('inputLoginPassword').value;

        // 创建请求数据
        var data = JSON.stringify({
            "account": account,
            "password": password
        });

        // 发起POST请求
        fetch('/consumer_func/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: data
        })
            .then(response => response.json())
            .then(data => {
                // 处理响应数据
                console.log('Success:', data);
                alert('登录成功！');
                localStorage.setItem('userInfo',JSON.stringify(data.data))
                // 关闭模态框
                $('#loginModal').modal('hide');
            })
            .catch((error) => {
                // 处理错误
                console.error('Error:', error);
                alert('登录失败，请检查账号和密码。');
            });
    };

    // 初始化时更新用户名显示
    document.addEventListener('DOMContentLoaded', function() {
        updateUsernameDisplay();
    });

    // 处理注册表单提交
    document.getElementById('regForm').onsubmit = function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取表单数据
        var account = document.getElementById('inputRegAccount').value;
        var password = document.getElementById('inputRegPassword').value;
        var rePassword = document.getElementById('inputRegRePassword').value;
        var realname = document.getElementById('inputRegRealname').value;
        var idcard = document.getElementById('inputRegIdcard').value;
        var tel = document.getElementById('inputRegTel').value;
        var age = document.getElementById('inputRegAge').value;
        var province = document.getElementById('inputRegProvince').value;
        var city = document.getElementById('inputRegCity').value;
        var district = document.getElementById('inputRegDistrict').value;
        var addr = document.getElementById('inputRegAddr').value;

        // 验证密码是否一致
        if (password !== rePassword) {
            alert('两次输入的密码不一致，请重新输入。');
            return;
        }

        // 创建请求数据
        var data = JSON.stringify({
            "account": account,
            "password": password,
            "realname": realname,
            "idcard": idcard,
            "tel": tel,
            "age": age,
            "province": province,
            "city": city,
            "district": district,
            "addr": addr
        });

        // 发起POST请求
        fetch('/consumer_func/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: data
        })
            .then(response => response.json())
            .then(data => {
                // 处理响应数据
                console.log('Success:', data);
                alert('注册成功！');
                localStorage.setItem('userInfo', JSON.stringify(data.data));
                // 关闭模态框
                $('#regModal').modal('hide');
            })
            .catch((error) => {
                // 处理错误
                console.error('Error:', error);
                alert('注册失败，请检查输入信息。');
            });
    };

    // 更新用户名显示的函数
    function updateUsernameDisplay() {
        var userInfo = localStorage.getItem('userInfo');
        if (userInfo) {
            var userInfoObj = JSON.parse(userInfo);
            var realname = userInfoObj.realname;
            document.querySelector('#bs-example-navbar-collapse-1 ul.nav.navbar-nav.navbar-right li a[style="color: red"]').textContent = realname;
        }
    }

    //获取商品信息
    document.addEventListener('DOMContentLoaded', function() {
        //获取请求
        fetch('/goods_func/goodInfo',{
            method:'GET',
            headers:{
                'Content-Type':'application/json'
            }
        })
            .then(res=>res.json())
            .then(data=>{
                if(data.code === 200){
                    renderGoods(data.data)
                }else{
                    alert('获取商品信息失败')
                }
            })
            .catch(error => {
                console.error('Error fetching goods:', error);
                alert('获取商品信息失败，请稍后再试。');
            });
    });
    function renderGoods(goodsList) {
        const blockContent = document.querySelector('.block-content');
        blockContent.innerHTML = '';

        goodsList.forEach(good => {
            const goodsListDiv = document.createElement('div');
            goodsListDiv.className = 'goods-list';

            const goodsBlockDiv = document.createElement('div');
            goodsBlockDiv.className = 'goods-block';

            const img = document.createElement('img');
            img.src = good.img;
            img.alt = good.title;
            img.className = 'goods-img';

            const foot1 = document.createElement('div');
            foot1.className = 'foot mt20';

            const goodsName = document.createElement('div');
            goodsName.className = 'goods-name';
            goodsName.textContent = good.title;

            const addCardImg = document.createElement('img');
            addCardImg.src = '/image/cart.png';
            addCardImg.alt = '';
            addCardImg.className = 'add-card';

            foot1.appendChild(goodsName);
            foot1.appendChild(addCardImg);

            const foot2 = document.createElement('div');
            foot2.className = 'foot mt20';

            const newPrice = document.createElement('div');
            newPrice.className = 'new-price';
            newPrice.textContent = `${good.price.toFixed(2)}元`;

            // const oldPrice = document.createElement('div');
            // oldPrice.className = 'old-price';
            // oldPrice.textContent = `${good.price.toFixed(2)}元`;

            foot2.appendChild(newPrice);
            // foot2.appendChild(oldPrice);

            goodsBlockDiv.appendChild(img);
            goodsBlockDiv.appendChild(foot1);
            goodsBlockDiv.appendChild(foot2);

            goodsListDiv.appendChild(goodsBlockDiv);
            blockContent.appendChild(goodsListDiv);
        });
    }
</script>
</html>
